/* component */
import BizTable from '@src/component/business/BizTable/BizTable'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* model */
import LoginUser from '@model/entity/LoginUser/LoginUser'
/* hooks */
import { useRoleViewTenantBuyAndUseUserNum } from '@src/modules/account/role/hooks'
/* vue */
import { ComponentInstance, computed, defineComponent, onBeforeMount, PropType, Ref, ref } from 'vue'
/* scss */
import '@src/modules/account/role/component/UserBuyAndUseBar/index.scss'
/* service */
import TenantService from '@service/TenantService'
import { isEmpty, isString } from '@src/util/type'
/* mixin */ 
import { VersionControlServiceProviderMixin } from '@src/mixins/versionControlMixin';

import {t} from '@src/locales'

type UserBuyAndUseBarColumnSlotDataType = { value: LoginUser }

export type UserBuyAndUseBarProps = {

}

export interface UserBuyAndUseBarSetupState {
  
}

export enum UserBuyAndUseBarEventEnum {
  
}

export type UserBuyAndUseBarEmitsOptions = {
  input: () => void;
}

export type UserBuyAndUseBarMethodsOptions = {
  
}

export type UserBuyAndUseBarInstance = ComponentInstance & UserBuyAndUseBarSetupState
export type UserBuyAndUseBarVM = UserBuyAndUseBarSetupState & UserBuyAndUseBarProps & ComponentInstance & UserBuyAndUseBarMethodsOptions

export default defineComponent({
  name: ComponentNameEnum.UserBuyAndUseBar,
  mixins: [VersionControlServiceProviderMixin],
  setup(props: UserBuyAndUseBarProps, { slots, emit }) {
    
    const TrialText = t('common.base.temporary')
    const Placeholder = '--'
    
    const { fetchRoleTenantBuyAndUseUserNumImpl, buyAndUseUserNumData } = useRoleViewTenantBuyAndUseUserNum()
    
    /** 
     * @description 是否未付费
    */
    const isNotPayed = computed(() => {
      
      const isPay = buyAndUseUserNumData.value.isPay
      
      if (isString(isPay) && isEmpty(isPay)) {
        return false
      }
      
      return TenantService.isNotPayed(buyAndUseUserNumData.value.isPay)
      
    })
    
    /** 
     * @description 已购买的账号数量
    */
    const accountNum = computed(() => {
      return buyAndUseUserNumData.value.accountNum || Placeholder
    })
    
    /** 
     * @description 已分配的账号数量
    */
    const userCount = computed(() => {
      return buyAndUseUserNumData.value.userCount || Placeholder
    })
    
    /** 
     * @description 分配给内部人员的数量
    */
    const tenantUserCount = computed(() => {
      return buyAndUseUserNumData.value.tenantUserCount || Placeholder
    })
    
    /** 
     * @description 服务商用户数量
    */
    const providerUser = computed(() => {
      return buyAndUseUserNumData.value.providerUserCount || Placeholder
    })
    
    /** 
     * @description 剩余可分配的账号数量
    */
    const surplusNum = computed(() => {
      return Number(buyAndUseUserNumData.value.accountNum) - Number(buyAndUseUserNumData.value.tenantUserCount) || Placeholder
      
    })
    
    onBeforeMount(() => {
      fetchRoleTenantBuyAndUseUserNumImpl()
    })
    
    return {
      accountNum,
      userCount,
      surplusNum,
      providerUser,
      tenantUserCount,
      isNotPayed,
      TrialText
    }
    
  },
  render(h) {
    return (
      <div class={ComponentNameEnum.UserBuyAndUseBar}>
        
        <i class="iconfont icon-info"></i>
        
        <div class="user-buy-and-use-bar__item">
          <span>
            {this.$t('common.base.purchasedAccountsNum')}：
          </span>
          
          {this.isNotPayed ? (
            <h4>{ this.TrialText }</h4>
          ) : (
            <span>
              <h4>
                { this.accountNum }
              </h4>
              {this.$t('account.unitPiece')}
            </span>
          )}
          
        </div>
        
        <div class="user-buy-and-use-bar-line"></div>
        
        <div class="user-buy-and-use-bar__item">
          <span>
          {this.$t('common.base.allotedAccountsNum')}：
          </span>
          <span>
            <h4>
              { this.userCount }
            </h4>
            { this.$t('account.unitPiece') }（{ this.$t('account.role.tenantUserCount', {num:this.tenantUserCount}) }{this._isShowServiceProviderModule ? `， ${this.$t('account.role.providerUserCount', {num:this.providerUser}) }` : ''}）
          </span>
        </div>
        
        <div class="user-buy-and-use-bar-line"></div>
        
        <div class="user-buy-and-use-bar__item">
          <span>
          {this.$t('common.base.enableAllotAccountsNum')}：
          </span>
          
          {this.isNotPayed ? (
            <h4>{ this.TrialText }</h4>
          ) : (
            <span>
              <h4>
                { this.surplusNum }
              </h4>
              {this.$t('account.unitPiece')}
            </span>
          )}
          
        </div>
        
      </div>
    ) as any
  }
}) as any
